<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        {% if(isShow) { %} <b>{{ name }}</b> {% } %}
    </div>
    <script>
        const content = document.querySelector('.app').innerHTML;
        const compileState = content => content.replace(/\{\{([^}]+)\}\}/g, function() {
            // console.log(arguments);
            return "${" + arguments[1] + "}"
        }).trim();
        const compileFlag = content => {
            let head = `let str = '';\r\n with(obj){\r\n`;
            head += "str+=`";
            let temp = compileState(content).replace(/\{\%([^%]+)\%\}/g, function() {
                return "`\r\n" + arguments[1] + "\r\nstr+=`\r\n"
            })
            let tail = "`}\r\n return str;";
            return head + temp + tail;
        }
        // const compileFn = new Function('state', 'return `'+ compileState(content) + '`');
        const compileFn = new Function('obj', compileFlag(content))
        // const compileFn = new Function('state', `return` + ' ' + compileState(content))
        console.log(compileFn)
        document.querySelector('.app').innerHTML = compileFn({isShow: true, name: 144})
    </script>
</body>
</html>